<template>
  <div class="chart" ref="myBar"></div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
export default {
  name: 'ProgressChart',
  mixins: [resize],
  mounted() {
    // 注意必须要给chart给宽高
    // 初始化
    this.myEchart = echarts.init(this.$refs.myBar)
    this.myEchart.setOption({
      xAxis: {
        show: false,
        max: 100,
        mini: 0,
        // 轴两边的距离
        boundaryGap: false
      },
      yAxis: {
        type: 'category',
        show: false
      },

      series: {
        type: 'bar',
        data: [78],
        barWidth: 10,
        // 设置鼠标移上没有hover效果
        silent: true,
        color: 'yellowgreen',
        // 显示背景颜色
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        label: {
          show: true,
          //设置label为
          formatter: '|',
          position: 'right',
          color: 'yellowgreen'
        }
      },
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      }
    })
  }
}
</script>

<style>
.chart {
  width: 100%;
  height: 100%;
}
</style>
